<template>
	<u-icon name="volume-fill" @click="playAudio()" :size="size" :color="play ? '#ffaa00' : '#64ff39'"></u-icon>
</template>

<script>
export default {
  props: {
    path: String,
	size: String,
  },
  data() {
  	return {
  		play: false,
  	}
  },
  methods: {
	  playAudio() {
		if(!this.path){
			return;
		}
		console.log("-----", this.$BASE_URL.environment.baseURL + '/profile' + this.path);
	  	const innerAudioContext = uni.createInnerAudioContext();
	  	innerAudioContext.autoplay = true;
	  	innerAudioContext.src = this.$BASE_URL.environment.baseURL + '/profile' + this.path;
	  	innerAudioContext.onPlay(() => {
	  		this.play = true;
			this.$emit('onPlay');
	  	});
	  	innerAudioContext.onEnded(() => {
	  		this.play = false;
			this.$emit('onEnded');
	  	});
	  	innerAudioContext.onError((res) => {
	  		console.log(res);
			this.$emit('onError');
	  	});
		// 触发自定义事件
		this.$emit('playAudio');
	  },
  }
}
</script>

<style lang="scss" scoped>
	
</style>